<template>
	<view class="page">
		<demo-block title="栗子海报">
			<l-painter
				css="width: 750rpx; padding-bottom: 100rpx; background: linear-gradient(180deg,#ffffff 0%, #ffffff 100%)"
				@fail="fail" @done="done" pathType="url" ref="poster" performance>
				<!-- 			<l-painter-image src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231009091952.jpg"  css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;"/> -->
				<l-painter-view css="margin-top: 40rpx; padding-left: 20rpx; display: inline-block">
					<!-- 				<l-painter-text text="隔壁老王" css="display: block; padding-bottom: 10rpx; color: #ffffff; font-size: 32rpx; fontWeight: bold"/>
				<l-painter-text text="为您挑选了一个好物?" css="color: rgba(255,255,255,.7); font-size: 24rpx"/> -->
				</l-painter-view>
				<l-painter-view
					css="margin-left: 40rpx;margin-top: 30rpx; padding: 32rpx; box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 670rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
					<l-painter-image
						src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20231009143259.jpg"
						css="object-fit: fill; object-position: 50% 50%; width: 606rpx; height: 750rpx;" />
					<l-painter-view
						css="color: #FF0000;position:absolute;  font-weight: bold; font-size: 28rpx; line-height: 1em;top:36%;left:-2.5%;">
						<l-painter-image :src="teacherDetail.bareheadedPhoto"
							css="background: #ffffff; object-fit: cover; margin-left: 40rpx; margin-top: 40rpx; width: 100rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 100rpx; border-radius: 50%;" />
					</l-painter-view>
					<l-painter-view
						css="color: #b80d0f;position:absolute;  font-weight: bold; font-size: 34rpx; line-height: 1em;top:42%;left:21.5%;">
						<l-painter-text
							css="width:155rpx; flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 1;"
							:text="teacherDetail.realName" />
					</l-painter-view>
					<l-painter-view
						css="color: #b80d0f;position:absolute;  font-weight: bold; font-size: 26rpx; line-height: 1em;top:43%;left:42%;">
						<l-painter-text
							css="width:280rpx; flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 1;"
							:text="teacherDetail.graduateSchool" />
					</l-painter-view>
					<l-painter-view
						css="color: #7c726c;position:absolute; font-size: 22rpx; line-height: 1em;top:48%;left:21.5%;line-height:35rpx;">
						<l-painter-text
							css="width:375rpx; flex: 1; padding-right: 20rpx; box-sizing: border-box; line-clamp: 3;"
							:text="teacherDetail.introduction" />
					</l-painter-view>
				</l-painter-view>
				</l-painter-view>
				<l-painter-view css="margin-top: 32rpx; font-size: 26rpx;top:60%;left:17%;position:absolute;">
					<l-painter-image :src="img"
						css="object-fit: fill; object-position: 50% 50%; width: 140rpx; height: 140rpx;border-radius:20rpx" />
				</l-painter-view>
			</l-painter>
			<view style="padding: 0 50rpx;">
				<button style="height: 81rpx;
	background: #F87579;
	border-radius: 41rpx;color: #ffffff;" type="default" @click="save">保存</button>
			</view>
		</demo-block>
	</view>
</template>

<script>
	export default {
		data: () => ({
			picture: '',
			picture2: '',
			teacherDetail: {},
			img: '',
			teacherId: '',
			path: ''
		}),
		onLoad(options) {
			uni.showLoading({
				title: '加载中'
			});
			let that = this
			setTimeout(function() {

				that.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath, 'qqqq')
						that.path = res.tempFilePath
					},

				})
				uni.hideLoading();
			}, 2000);
			that.teacherId = options.teacherId
			that.teacherImg()
			that.getDetail()
		},
		onShareAppMessage() {
			return {
				title: '分享',
				path: `/pages/contradict/shine?teacherId=${this.teacherId}`,
				imgUrl: ''
			}
		},
		onShareTimeline() {
			return {
				title: '分享',
				path: `/pages/contradict/shine?teacherId=${this.teacherId}`,
				imageUrl: ''
			};
		},
		methods: {
			async teacherImg() {
				this.img = await this.$u.api.teacherImg({
					teacherId: this.teacherId
				})
			},
			async getDetail() {

				this.teacherDetail = await this.$u.api.getTeacUnfo({
					teacherId: this.teacherId,
				})

			},
			fail(v) {
				console.log(v)
			},
			done(v) {
				console.log('绘制完成:')
			},
			save() {
				let that = this
				that.$refs.poster.canvasToTempFilePathSync({
					fileType: 'jpg',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath)
						that.picture2 = res.tempFilePath
						that.saveImage()
					},
					fail(e) {
						console.log('???????????', e)
					}
				})
			},
			// 保存图征
			saveImage() {
				let that = this

				uni.saveImageToPhotosAlbum({
					filePath: that.picture2,
					success(res) {
						console.log(res);
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
					fail(e) {
						console.log(e);
					}
				});

			}
		}
	};
</script>

<style lang="stylus" scoped>

</style>